<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索框 添加商品 -->
        <div style="margin: 15px;">
            <el-input placeholder="请输入内容" v-model="serchGoods" class="input-with-select" style="width: 300px;">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <el-button type="success" @click="addGoodes">添加商品</el-button>
        </div>
        <!-- 表格 -->
        <template>
            <el-table ref="singleTable" :data="goodTtableData" border="" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column property="goods_name" label="商品名称" width="500">
                </el-table-column>
                <el-table-column property="goods_price" label="商品价格" width="120">
                </el-table-column>
                <el-table-column property="goods_weight" label="商品重量"  width="100">
                </el-table-column>
                <el-table-column  label="创建时间" width="200">
                  <template slot-scope="scope">
                    <span>{{scope.row.add_time|timeformat}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini"  type="success" @click="handleEditGoods(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDeleteGoods(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>
<script>
import { getAllGoods } from '@/api/index.js'
export default {
  data () {
    return {
      serchGoods: '',
      query: '',
      pagenum: 1,
      pagesize: 20,
      goodTtableData: [],
      currentRow: null
    }
  },
  filters: {
    timeformat (time) {
      var times = new Date(time)
      var y = times.getFullYear()
      var m = times.getMonth() + 1
      var s = times.getDate()
      return y + '-' + m + '-' + s
    }
  },
  methods: {
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      this.currentRow = val
    },
    // 编辑按钮
    handleEditGoods () {
    },
    // 删除按钮
    handleDeleteGoods () {
    },
    // 添加商品
    addGoodes () {}
  },
  mounted () {
    getAllGoods({query: '', pagenum: this.pagenum, pagesize: this.pagesize}).then(res => {
      console.log(res.data.goods)
      this.goodTtableData = res.data.goods
    })
  }
}
</script>

<style lang="scss" scoped>
/* 覆盖element导航菜单的样式 */
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
